<template>
  <div class="page-container" style="padding-bottom: 0px">
    <div
      class="page-form-bg"
      style="overflow: auto"
      :style="{
        height: isShowTools ? 'calc(100vh - 295px)' : 'calc(100vh - 205px)',
      }"
    >
      <el-form
        ref="form"
        class="query-more-form"
        size="mini"
        label-width="85px"
        :model="form"
      >
        <el-row>
          <el-col :span="16">
            <el-col :span="24">
              <div class="page-form-title page_form_title">
                <span class="label">工单登记</span>
                <span class="caseNumber"
                  >案件编号:{{ form.code
                  }}<span class="caseNumberSon" v-show="form.mergeCaseCode"
                    >【{{ form.mergeCaseCode }}】</span
                  ></span
                >
                <div v-if="form.handleSatisfaction >= 1">
                  <span>办理满意度</span>
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 1"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 2"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 3"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 4"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 5"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                </div>
                <!-- <span></span> -->
              </div>
            </el-col>
            <el-col :span="24" style="padding: 20px">
              <!-- row1 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="来电号码" class="reportTel"
                    ><el-input
                      v-model="form.reportTel"
                      placeholder="请输入来电号码"
                      :disabled="isdisabled"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="姓名"
                    ><el-input
                      v-model="form.reportName"
                      :disabled="isdisabled"
                      placeholder="请输入姓名"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="性别">
                    <el-select
                      :disabled="isdisabled"
                      v-model="form.reportGender"
                      placeholder="请选择性别"
                    >
                      <el-option
                        v-for="item in genderArr"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >历史工单</el-button
                  ></el-col
                >
              </el-row>

              <!-- row2 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="来源类型">
                    <el-select
                      v-model="form.sourceName"
                      :disabled="isdisabled"
                      class="w-100"
                      placeholder="请输入来源类型"
                    >
                      <el-option
                        v-for="item in sourceTypeArr"
                        :key="item.id"
                        :value="item.code"
                        :label="item.value"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="诉求类型">
                    <el-select
                      class="w-100"
                      v-model="form.type"
                      :disabled="isdisabled"
                      placeholder="请选择诉求类型"
                    >
                      <el-option
                        v-for="item in appealTypeArr"
                        :key="item.id"
                        :value="item.value"
                        :label="item.value"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="紧急级别">
                    <el-select v-model="form.level" :disabled="isdisabled">
                      <el-option
                        v-for="item in levelArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.value"
                      /> </el-select></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="是否保密">
                    <el-select
                      class="w-100"
                      :disabled="isdisabled"
                      v-model="form.secrecy"
                      placeholder="请选择是否保密"
                    >
                      <el-option
                        v-for="item in secrecyArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.type"
                      />
                    </el-select> </el-form-item
                ></el-col>
              </el-row>

              <!-- row3 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="区/市/县">
                    <el-select
                      class="w-100"
                      v-model="form.addressCityName"
                      :disabled="isdisabled"
                      placeholder="请选择区/市/县"
                      @change="changeRessStreet"
                    >
                      <el-option
                        v-for="item in addressCityArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="街道/乡镇">
                    <el-select
                      class="w-100"
                      v-model="form.addressStreetName"
                      :disabled="isdisabled"
                      placeholder="请选择街道/乡镇"
                      @change="changeDetailedUser"
                    >
                      <el-option
                        v-for="item in addressStreetArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="社区/村">
                    <el-select
                      class="w-100"
                      :disabled="isdisabled"
                      v-model="form.addressCommunityName"
                      placeholder="请选择社区/村"
                    >
                      <el-option
                        v-for="item in addressDetailedUserArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      /> </el-select></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="风险预警"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.riskMessage"
                      placeholder="请输入风险预警"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>

              <!-- row5 -->
              <el-row :gutter="20">
                <el-col :span="24"
                  ><el-form-item label="标签集"
                    ><el-input
                      :disabled="islabelsDisabled"
                      v-model="form.labels"
                      placeholder="请输入标签集"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="24"
                  ><el-form-item label="权责清单"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.categoryCompleteName"
                      placeholder="请输入权责清单"
                      maxlength="255" /></el-form-item
                ></el-col>

                <el-col :span="24"
                  ><el-form-item label="位置"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.addressDetailedUser"
                      placeholder="请输入位置"
                      maxlength="255" /></el-form-item
                ></el-col>
                <!-- <el-col :span="6"
                  ><el-button size="mini" class="submit-btn" @click="locationPosition"
                    >地图定位</el-button
                  ></el-col
                > -->
                <!-- <el-col :span="6"
                  ><el-button size="mini" class="submit-btn" @click="handleShowDispatch"
                    >案件派发</el-button
                  ></el-col
                > -->

                <el-col :span="24"
                  ><el-form-item label="工单标题"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.title"
                      placeholder="请输入工单标题"
                      maxlength="255" /></el-form-item
                ></el-col>

                <el-col :span="24"
                  ><el-form-item label="诉求内容" class="appealContent"
                    ><el-input
                      type="textarea"
                      :rows="5"
                      :disabled="isdisabled"
                      v-model="form.content"
                      placeholder="请输入诉求内容"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>
            </el-col>
          </el-col>

          <el-col :span="8" style="padding: 10px 5px 10px 20px">
            <!-- 地图 -->
            <SearchPanel @change="handleSearchPanelChange">
              <div class="map-panel mb-20">
                <div id="map" ref="map" />
              </div>
            </SearchPanel>

            <!-- 流程 -->
            <div class="steps-panel of-auto">
              <div class="steps-title" />
              <div class="steps-content">
                <el-steps class="custom-steps" direction="vertical" :active="1">
                  <el-step
                    v-for="(item, index) in taskHistoryList"
                    :key="index"
                  >
                    <template slot="icon">
                      <span
                        class="status"
                        :class="index === 0 ? 'color-1' : ''"
                      />
                    </template>
                    <template slot="title">
                      <div class="title">
                        {{ item.nodeName }}
                        <img
                          v-show="item.overtimeFlag === 0"
                          :src="case1"
                          class="w-60 h-15"
                          alt=""
                        />
                        <img
                          v-show="item.overtimeFlag === 1"
                          :src="case1"
                          class="w-60 h-15"
                          alt=""
                        />
                      </div>
                      <div class="time fs-12">
                        {{ parseTime(item.completeTime) }}
                      </div>
                    </template>
                    <template slot="description">
                      <div class="step-content step_content_style">
                        <div class="step-content-left">
                          <div>办理人：{{ item.creatUserName }}</div>
                          <div>办理部门：{{ item.creatDeptName }}</div>
                          <div>办理意见：{{ item.nodeOpinion }}</div>
                        </div>
                        <div class="step-content-right">
                          <img
                            :src="case4"
                            alt=""
                            @click="imageDialog(item.attachments)"
                          />
                        </div>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 审核 -->
        <el-row class="buttomForm">
          <el-form
            ref="form"
            class="query-more-form"
            size="mini"
            label-width="85px"
            :model="applyform"
          >
            <el-col :span="16">
              <el-col :span="24">
                <div class="page-form-title page_form_title">
                  <span class="label">审核信息</span>
                  <span class="caseNumber"
                    >案件编号:{{ applyform.code
                    }}<span
                      class="caseNumberSon"
                      v-show="applyform.mergeCaseCode"
                      >【{{ form.mergeCaseCode }}】</span
                    ></span
                  >
                </div>
              </el-col>
              <el-col :span="24" style="padding: 20px">
                <!-- row6 -->
                <el-row :gutter="20" class="apply">
                  <el-col :span="6"
                    ><el-form-item label="申请类型"
                      ><el-input
                        :disabled="isdisabled"
                        v-model="applyform.applyType"
                        placeholder="请输入申请类型"
                        maxlength="255" /></el-form-item
                  ></el-col>
                  <el-col :span="6"
                    ><el-form-item label="申请部门"
                      ><el-input
                        :disabled="isdisabled"
                        v-model="applyform.applyDepartmentName"
                        placeholder="请输入申请部门"
                        maxlength="255" /></el-form-item
                  ></el-col>
                  <el-col :span="6"
                    ><el-form-item label="申请时间"
                      ><el-input
                        :disabled="isdisabled"
                        v-model="applyform.applyTime"
                        placeholder="请输入申请时间"
                        maxlength="255" /></el-form-item
                  ></el-col>
                  <el-col :span="6"
                    ><el-form-item label="申请人"
                      ><el-input
                        :disabled="isdisabled"
                        v-model="applyform.applyManName"
                        placeholder="请输入申请人姓名"
                        maxlength="255" /></el-form-item
                  ></el-col>
                  <el-col :span="24"
                    ><el-form-item label="申请事由"
                      ><el-input
                        :disabled="isdisabled"
                        v-model="applyform.applyOpinion"
                        placeholder="请输入申请事由"
                        maxlength="255" /></el-form-item
                  ></el-col>
                </el-row>

                <!-- row7 -->
                <el-row :gutter="20" class="apply">
                  <el-col :span="24"
                    ><el-form-item label="审核意见" prop="approvalOpinion"
                      ><el-input
                        v-model="applyform.approvalOpinion"
                        placeholder="请输入审核意见"
                        maxlength="255" /></el-form-item
                  ></el-col>
                  <el-col :span="24" v-if="applyform.applyType == '延期审核'"
                    ><el-form-item label="延期至" prop="agreeDelayTime">
                      <el-date-picker
                        v-model="applyform.agreeDelayTime"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker></el-form-item
                  ></el-col>
                  <el-col :span="24">
                    <UploadFile
                      ref="uploadFile"
                      @pushFile="pushFile"
                      :files="fileList"
                    />
                    <el-table :data="tableData" border style="width: 100%">
                      <el-table-column prop="name" label="文件名">
                      </el-table-column>
                      <el-table-column prop="status" label="状态">
                      </el-table-column>
                      <el-table-column prop="size" label="大小">
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            @click="handleClick(scope.row)"
                            type="text"
                            size="small"
                            >查看</el-button
                          >
                          <el-button type="text" size="small">编辑</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>

                <!-- row8 -->
                <el-row class="apply">
                  <el-button type="primary" @click="toExamine(1)"
                    >审核通过</el-button
                  >
                  <el-button type="primary" @click="toExamine(2)"
                    >审核拒绝</el-button
                  >
                </el-row>
              </el-col>
            </el-col>
          </el-form>
        </el-row>
      </el-form>

      <!-- 底部案件处理按钮 -->
      <div class="bottom-btn-panel flex-end-center" v-if="buttonDisable">
        <!-- 按钮提示 -->
        <el-button
          type="primary"
          class="details_preservation"
          v-show="isDetails"
          >详情</el-button
        >
        <el-button
          type="primary"
          class="details_preservation"
          v-show="isPreservation"
          >保存</el-button
        >
        <!-- 核实派遣，核实反馈，案件派发，处置反馈，核查派遣，核查反馈，案件回访，案件结案，节点延期，案件延期，案件回退 -->
        <div v-if="form.nodeNowCode === '1001'">
          <el-button
            class="operation-btn red mr-10"
            @click="handleShowDispatch"
          >
            案件派发
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(1)">
            核实派遣
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(3)">
            处置反馈
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(11)">
            案件结案
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(12)">
            修改标签集
          </el-button>
        </div>

        <div v-else-if="form.nodeNowCode === '1003'">
          <el-button class="operation-btn yellow mr-10" @click="examine(2)">
            核实反馈
          </el-button>
        </div>

        <div
          v-else-if="form.nodeNowCode === '200' || form.nodeNowCode === '1004'"
        >
          <el-button class="operation-btn yellow mr-10" @click="examine(3)">
            处置反馈
          </el-button>
          <el-button class="operation-btn red mr-10" @click="caseTransfer">
            案件转派
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(8)"
            >案件延期</el-button
          >
          <el-button class="operation-btn yellow mr-10" @click="examine(9)"
            >案件回退</el-button
          >
        </div>

        <div v-else-if="form.nodeNowCode === '1002'">
          <el-button class="operation-btn yellow mr-10" @click="examine(4)">
            核查派遣
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(11)">
            案件结案
          </el-button>
          <el-button class="operation-btn yellow mr-10" @click="examine(12)">
            修改标签集
          </el-button>
          <el-button
            class="operation-btn red mr-10"
            @click="handleShowDispatch"
          >
            案件派发
          </el-button>
        </div>

        <div v-else-if="form.nodeNowCode === '302'">
          <el-button class="operation-btn yellow mr-10" @click="examine(5)">
            核查反馈
          </el-button>
        </div>
      </div>
    </div>

    <dispatchDialog2
      :dialogVisible="dispatchDialogVisible"
      @closeDialog="dispatchDialogVisible = false"
      :caseCode="caseCode"
    />

    <dispatchDialog3
      :dialogVisible="dispatchDialogVisible3"
      @closeDialog="dispatchDialogVisible3 = false"
      :caseCode="caseCode"
    />

    <ExamineDialog
      :dialog-visible="examineDialogVisible"
      :title="dialogTitle"
      :case-code="caseCode"
      :status="status"
      :caseId="caseId"
      @closeDialog="closeExaminDialog"
      @refreshPage="refreshPage"
    />

    <!-- 展示图片的弹窗 -->
    <ImageDialog
      :dialogVisible="dispatchImageDialogVisible"
      @closeDialog="dispatchImageDialogVisible = false"
      :imageDate="imageData"
    />
  </div>
</template>

<script>
import case1 from "@/assets/images/case/case1.png";
import case2 from "@/assets/images/case/case2.png";
import case3 from "@/assets/images/case/case3.png";
import UploadFile from "@/components/UploadFile";
import case4 from "@/assets/images/case/case4.png";
import ImageDialog from "./../casedeal/components/imageDialog";
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import CaseCardItem from "@/components/CaseCardItem";
import DispatchDialog2 from "./../casedeal/components/dispatchDialog2";
import DispatchDialog3 from "./../casedeal/components/dispatchDialog3";
import ExamineDialog from "./../casedeal/components/examineDialog";
import {
  caseMessage,
  caseSimilar,
  getApplyDatails,
  operationAudit,
  report,
  sourceType,
  region,
  categoryType,
  category,
  historyWork,
  analysis,
  getMapMsg,
  getAddressMsg,
} from "@/api/case.js";
import { wfmTaskHistory } from "@/api/wfm/wfm.js";
import { parseTime } from "@/utils/index";
import BMap from "BMap";
export default {
  name: "CaseDetail",
  components: {
    SearchPanel,
    Pagination,
    CaseCardItem,
    DispatchDialog2,
    ExamineDialog,
    ImageDialog,
    DispatchDialog3,
    UploadFile,
  },
  computed: {
    isShowTools() {
      return this.$route.meta.tools;
    },
  },
  data() {
    return {
      case1,
      case2,
      case3,
      case4,
      tableLoading: false,
      islabelsDisabled: false,
      examineDialogVisible: false,
      dispatchDialogVisible: false,
      dispatchDialogVisible3: false,
      dispatchImageDialogVisible: false,
      isShow: true,
      caseId: null,
      // height: "400px",
      isdisabled: true, //判断详情是否可编辑
      isPreservation: false, //编辑按钮是否显示
      isDetails: false, //保存按钮是否显示

      imageData: [],

      form: {},
      applyform: {},

      //   诉求类型下拉框
      appealTypeArr: [],

      //   来源类型下拉框
      sourceTypeArr: [],
      //   来源类型下拉框
      sourceTypeArr: [],

      //   是否保密下拉框
      secrecyArr: [
        {
          type: "是",
          id: 1,
        },
        {
          type: "否",
          id: 0,
        },
      ],

      //   区 市 县
      addressCityArr: [],

      // 街道、乡镇
      addressStreetArr: [],

      // 社区、村
      addressDetailedUserArr: [],

      //   行业
      industryArr: [],

      //   大类
      majorCategoriesArr: [],

      //小类
      subclassArr: [],
      // rules:{
      //   approvalOpinion:[{ required: true, message: '请输入审核意见', trigger: 'blur' }],
      //   agreeDelayTime: [
      //       { type: 'date', required: true, message: '请选择延期日期', trigger: 'change' }
      //     ],
      // },
      toExamines: {
        checkResult: "",
        checkOpinion: "",
        agreeDelayTime: "",
        attachments: [],
        applyId: "",
      },
      tableData: [],
      taskHistoryList: [],
      map: "",
      mapZoom: 14,
      fileList: "",
      query: {
        categoryDcaCode: "",
        categorySubCode: "",
        categorySupCode: "",
        dimension: "",
        longitude: "",
        type: "",
      },
      caseCode: "",
      dialogType: "",
      // 性别
      genderArr: [
        { value: 0, label: "女" },
        { value: 1, label: "男" },
      ],
      levelArr: [
        { id: 0, value: "普通" },
        { id: 1, value: "紧急" },
        { id: 2, value: "特急" },
      ],
      dialogTitle: "",
      status: 0,
      buttonDisable: true,
    };
  },
  created() {
    this.getCaseMsg(this.$route.params.caseCode);

    //  获取诉求信息
    this.getAppealType();

    // 获取来源信息
    this.getSourceType();

    // 获取区县
    this.getRegion();

    // 获取行业
    this.getIndustry();
  },
  mounted() {
    this.initData();
    // this.initMap();
    this.getBackOff(this.$route.params.id);
    this.toExamines.applyId = this.$route.params.id;
    this.InitializeMap();
    this.locationPosition();
  },

  updated() {
    this.locationPosition();
  },
  methods: {
    parseTime,
    handleShowDispatch() {
      this.dispatchDialogVisible = true;
    },

    // 获取回退申请还是延期审核
    getData() {},

    // 修改标签集成功后，刷新页面
    refreshPage() {
      this.getCaseMsg(this.$route.params.caseCode);
    },

    initMap() {
      // 创建Map实例
      this.map = new BMap.Map("map");
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(
        new BMap.Point(104.072242, 30.663711),
        this.mapZoom
      );
      // 设置地图显示的城市 此项是必须设置的
      this.map.setCurrentCity("成都");
      // 启用滚轮放大缩小，默认禁用
      this.map.enableScrollWheelZoom(true);
      // 启用地图惯性拖拽，默认禁用
      this.map.enableContinuousZoom(true);
    },

    initData() {
      this.buttonDisable = this.$route.params.buttonDisable;
      if (this.$route.params.caseCode) {
        this.caseCode = this.$route.params.caseCode;
        this.dialogType = this.$route.params.dialogType;
        // this.getCaseMsg(this.$route.params.caseCode);
        this.getTaskHistory(this.$route.params.caseCode);
        // this.getCaseSimilar();
      }
    },

    // 获取来源信息
    getSourceType() {
      categoryType({
        sysGroup: "caseSource",
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.sourceTypeArr = rows;
        })
        .catch({});
    },

    // 获取区县
    getRegion() {
      region({
        level: 1,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) {
            this.addressCityArr = rows;
            this.changeRessStreet(rows[0].id);
          }
        })
        .catch({});
    },

    // 获取街道乡镇
    changeRessStreet(value) {
      region({
        parentCode: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.addressStreetArr = rows;
        })
        .catch({});
    },

    // 获取社区、村
    changeDetailedUser(value) {
      region({
        parentCode: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.addressDetailedUserArr = rows;
        })
        .catch({});
    },

    // 获取行业
    getIndustry() {
      sourceType({
        parentId: 0,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.industryArr = rows;
        })
        .catch({});
    },

    // 获取大类
    changeMajorCategories(value) {
      sourceType({
        parentId: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.majorCategoriesArr = rows;
        })
        .catch({});
    },

    // 获取小类
    changeSubclass(value) {
      sourceType({
        parentId: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.subclassArr = rows;
        })
        .catch({});
    },

    // 获取诉求信息
    getAppealType() {
      categoryType({
        sysGroup: "caseType",
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.appealTypeArr = rows;
        })
        .catch({});
    },

    caseTransfer() {
      this.dispatchDialogVisible3 = true;
    },

    // 接受审核 -- 拒绝审核
    toExamine(val) {
      this.toExamines.checkResult = val;
      if (this.applyform.applyType == "回退审核") {
        if (!this.applyform.approvalOpinion) {
          this.$message.error("请输入审核意见");
        } else {
          operationAudit(this.toExamines)
            .then((result) => {
              let { msg, code } = result;
              if (code == 200) {
                this.$message.success("操作成功");
                this.$router.push("/backAudit");
              }
            })
            .catch(() => {});
        }
      } else if (this.applyform.applyType == "延期审核") {
        if (!this.applyform.agreeDelayTime) {
          this.$message.error("请选择延期的时间");
        } else if (!this.applyform.approvalOpinion) {
          this.$message.error("请输入审核意见");
        } else {
          operationAudit(this.toExamines)
            .then((result) => {
              let { msg, code } = result;
              if (code == 200) {
                this.$message.success("操作成功");
                this.$router.push("/deferredAudit");
              }
            })
            .catch(() => {});
        }
      }
    },

    // 获取定位信息
    locationPosition() {
      let self = this;
      //创建地址解析器实例
      var myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(self.form.addressDetailedUser, function (point) {
        if (point) {
          self.latitudeAndLongitude = point;
          self.form.longitude = point.lng;
          self.form.dimension = point.lat;
          self.map.clearOverlays();
          self.map.centerAndZoom(point, 16);
          self.map.addOverlay(new BMap.Marker(point));
        } else {
          self.$message.error("您选择的地址没有解析到结果！");
        }
      });
    },

    // 获取回退审核的详情信息
    getBackOff(id) {
      getApplyDatails(id)
        .then((result) => {
          let { msg, code, data } = result;
          console.log(data);
          if (data.applyType == "402") {
            data.applyType = "回退审核";
          } else if (data.applyType == "400") {
            data.applyType = "延期审核";
          }
          data.applyTime = parseTime(data.applyTime);
          this.applyform = data;
        })
        .catch(() => {});
    },

    pushFile(file) {
      this.tableData.push({
        name: file.name,
        size: file.size,
        status: file.status,
      });
    },

    handleDetail(data) {
      this.$router.push({
        name: "CaseDetail",
        params: { caseCode: data },
      });
    },
    // 查询案件的详情信息
    getCaseMsg(caseCode) {
      caseMessage(caseCode).then((result) => {
        let { code, data, msg } = result;
        if (code == 200) {
          if (data.secrecy == 1) {
            data.secrecy = "保密";
          } else if (data.secrecy == 0) {
            data.secrecy = "不保密";
          }
          this.form = data;
          this.caseId = data.id;
          this.query.categoryDcaCode = data.categoryDcaCode;
          this.query.categorySubCode = data.categorySubCode;
          this.query.categorySupCode = data.categorySupCode;
          this.query.dimension = data.dimension;
          this.query.longitude = data.longitude;
          this.query.type = data.type;
          // this.getCaseSimilar();
        }
      });
    },
    // 查询疑似案件的信息
    getCaseSimilar() {
      this.tableLoading = true;
      caseSimilar(this.query)
        .then((result) => {
          let { rows, code, total } = result;
          if (code == 200) {
            this.tableLoading = false;
            this.tableData = rows;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 图片的弹窗
    imageDialog(val) {
      this.dispatchImageDialogVisible = true;
      this.imageData = val;
    },

    // 查询案件流程的信息
    getTaskHistory(caseCode) {
      wfmTaskHistory({ caseCode: caseCode })
        .then((result) => {
          let { rows, code, total, msg } = result;
          if (code == 200) {
            // this.imageData=rows
            this.taskHistoryList = rows;
          }
        })
        .catch(() => {});
    },

    // 各种派遣
    examine(val) {
      this.examineDialogVisible = true;
      this.status = val;
      switch (val) {
        case 1:
          this.dialogTitle = "核实派遣";
          break;
        case 2:
          this.dialogTitle = "核实反馈";
          break;
        case 3:
          this.dialogTitle = "处置反馈";
          break;
        case 4:
          this.dialogTitle = "核查派遣";
          break;
        case 5:
          this.dialogTitle = "核查反馈";
          break;
        case 6:
          this.dialogTitle = "处置派遣";
          break;
        case 7:
          this.dialogTitle = "案件回访";
          break;
        case 8:
          this.dialogTitle = "案件延期";
          break;
        case 9:
          this.dialogTitle = "案件回退";
          break;
        case 11:
          this.dialogTitle = "案件结案";
          break;
        case 12:
          this.dialogTitle = "修改标签集";
          break;
        default:
          break;
      }
    },

    closeExaminDialog() {
      this.examineDialogVisible = false;
      this.getCaseMsg(this.caseCode);
      this.getTaskHistory(this.caseCode);
    },

    // 初始化地图
    InitializeMap() {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom("崇州市", 14); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      this.map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      this.map.enableScrollWheelZoom(true);
      let self = this;
      this.map.addEventListener("click", function (e) {
        self.map.clearOverlays();
        const point = new BMap.Point(e.point.lng, e.point.lat);
        self.form.longitude = e.point.lng;
        self.form.dimension = e.point.lat;
        var marker = new BMap.Marker(point);
        self.map.addOverlay(marker);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          self.form.addressDetailedUser =
            addComp.province +
            addComp.city +
            addComp.district +
            addComp.street +
            addComp.streetNumber;
        });
      });

      this.buttonDisable = this.$route.params.buttonDisable;
      if (this.$route.params.caseCode) {
        this.caseCode = this.$route.params.caseCode;
        this.dialogType = this.$route.params.dialogType;
        this.getCaseMsg(this.$route.params.caseCode);
        this.getTaskHistory(this.$route.params.caseCode);
        // this.getCaseSimilar();
      }
    },

    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
  },
};
</script>

<style lang="scss" scoped>
.steps-panel {
  // height: 440px;
  margin-top: 20px;
  .steps-title {
    height: 36px;
    background: url(../../assets/tools/title_bg.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .steps-content {
    // height: 400px;
    padding: 10px 10px 5px 10px;
    overflow: auto;
    margin-bottom: 20px;
  }
}
.map-panel {
  #map {
    height: 400px;
    border: 1px solid #eee;
  }
}
.flow-describe {
  padding-bottom: 7px;
}
.step_content_style {
  // display: flex;
  // justify-content: space-between;
  position: relative;
}
.step_content_style .step-content-right {
  position: absolute;
  right: -1px;
  top: -8px;
  cursor: pointer;
}
.tital_image {
  margin-left: 10px;
}

.page_form_title {
  display: flex;
  justify-content: space-between;
}

/deep/.el-step__description {
  padding-right: 0;
}

// 顶部案件编号
.page_form_title {
  display: flex;
  justify-content: space-between;
}

/deep/.appealContent .el-form-item__label {
  height: 99px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.caseNumber {
  font-weight: 700;
  .caseNumberSon {
    font-weight: 400;
    color: #626161;
  }
}
.flex-end-center {
  margin-bottom: 40px;
}
/deep/ .details_preservation {
  width: 90px;
  height: 36px;
  margin-right: 30px;
}

.apply {
  margin-top: 30px;
}

.el-form {
  position: relative;
}

.buttomForm {
  position: absolute;
  top: 550px;
}

/deep/ .el-step__title {
  display: flex;
  align-items: center;
  .time {
    margin-left: 10px;
  }
}

/deep/ .custom-steps .step-content {
  padding: 0px 6px;
}

/deep/ .reportTel .el-input__inner {
  padding: 0 5px;
}
</style>
